<template>
	<view>
		<view class="logo">
			<u-avatar mode="square" size="300" src="/static/logo.png" />
			<view class="title">纽艾杰能源管理平台</view>
		</view>

		<view class="login-block">
			<u-form :model="form" ref="form">
				<u-form-item>
					<u-icon name="account" color="#999" size="36" style="margin-right:10upx;" />
					<u-input placeholder="请输入用户名" v-model="form.username" />
				</u-form-item>
				<u-form-item>
					<u-icon name="lock" color="#999" size="36" style="margin-right:10upx;" />
					<u-input placeholder="请输入密码" v-model="form.password" type="password" password-icon />
				</u-form-item>
			</u-form>
		</view>

		<view class="button-block">
			<u-button type="primary" :style="{'background-color':'#378FFA'}" @click="doLogin">登录</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: null,
					password: null
				},
				redirect: '/pages/home/index'
			}
		},
		onLoad(options) {
			if (options.redirect) {
				this.redirect = options.redirect
				console.log('redirect=', this.redirect)
			}
		},
		methods: {
			doLogin(value) {
				if (this.form.username === null || this.form.username.trim() === '') {
					uni.showToast({
						title: '请输入用户名'
					})
					return
				}
				if (this.form.password === null || this.form.password.trim() === '') {
					uni.showToast({
						title: '请输入密码'
					})
					return
				}
				uni.showLoading({
					mask: true,
					title: '登录中...'
				})
				this.$u.api.login(this.form).then(res => {
					if (res.error_code === 0) {
						let data = res.data
						this.$u.vuex('vuex_token', data.token)
						this.$u.vuex('vuex_user', {
							username: data.login_name,
							realName: data.name,
							roleId: data.role_id,
							userId: data.userId
						})
						uni.reLaunch({
							url: this.redirect
						})
					} else {
						this.$refs.uToast.show({
							title: res.error_message,
							type: 'error'
						})
					}
					console.log(res)
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 526upx;
		box-sizing: border-box;
		padding-top: 100upx;

		.title {
			margin-top: 40upx;
			font-weight: bold;
			font-size: 42upx;
			color: #378FFA;
		}
	}

	.login-block {
		margin: 88upx 68upx 40upx;
	}

	.button-block {
		padding: 60upx 68upx;
	}
</style>
